<template>
  <div class="statusBox">
    <!-- <div class="interStatus">
      <h2>导弹在网状态: {{ networkState == '01' ? '不在' : '在网' }}</h2>
      <h2>导弹设备状态: {{ networkState == '01' ? '正常' : '异常' }}</h2>
    </div>
    <div class="infoBox">
      <div class="leftInfo">
        <a-descriptions title :column="2" layout="vertical">
          <a-descriptions-item label="星弹下行链路速率挡">{{ this.form.downRate }}</a-descriptions-item>
          <a-descriptions-item label="星弹下行链路信噪比">{{ this.form.noise }}</a-descriptions-item>
        </a-descriptions>

        <a-table bordered :columns="columns" :data-source="data" :pagination="false"></a-table>
      </div>
    </div>-->
    <div class="queryBtn">
      <a-select placeholder="请选择指控车" style="width:200px;" @change="changeCar" v-model="carInfo">
        <a-select-option
          :value="item.identificationCode"
          v-for="item in options"
          :key="item.id"
        >{{ item.name }} ({{item.identificationCode}})</a-select-option>
      </a-select>
      <!-- <a-button type="primary" style="margin-left: 10px" @click="onChangeCar">状态查询</a-button> -->
      <a-popconfirm style="margin-left: 20px"    overlayClassName="poperLayTable" title="确定发送状态查询指令吗?" @confirm="() => onChangeCar()" >
               <a-button type="primary">状态查询</a-button>
            </a-popconfirm>
    </div>
    <div>
      <div class="resultBox">
        <div
          v-for="(item,index) in  ballList"
          :key="item.id"
          @click="toggleClass(index+1,item)"
          class="ballBox ASIC"
        >
          <div class="ballTitle">导弹{{item.identificationCode}}网络状态</div>
        </div>
      </div>
      <div class="ballInfo">
        <div class="topDiv">
          <div class="ASIC t_dBox">
            <span>识别码</span>
            <p>{{model.identificationCode}}</p>
          </div>
          <div class="pointerDial">
            <div id="main"></div>
          </div>
          <div class="ASIC">
            <div
              class="box_signal_level_box"
            >在网状态：{{model.networkState==='0000'?'在网': model.networkState == '0001' ? '异常':'*'}}</div>
            <div
              class="box_signal_level_box"
            >设备状态：{{model.deviceState==='0000'?'正常': model.deviceState == '0001' ? '异常':'*'}}</div>
          </div>
        </div>
        <div class="bottomDiv">
          <div class="ASIC">
            <a-descriptions title :column="1" class="color-des">
              <a-descriptions-item
                label="载波同步状态"
              >{{model.carrier=='1'?"已同步":model.carrier=='0'?"未同步":"*"}}</a-descriptions-item>
              <a-descriptions-item
                label="位同步状态"
              >{{model.position=='1'?"已同步":model.position=='0'?"未同步":"*"}}</a-descriptions-item>
              <a-descriptions-item
                label="帧同步状态"
              >{{model.frame=='1'?"已同步":model.frame=='0'?"未同步":"*"}}</a-descriptions-item>
            </a-descriptions>
          </div>
          <div class="ASIC t_dBox">
            <span>信噪比</span>
            <p>{{model.noiseRatio?parseInt(model.noiseRatio, 2):'*' }}</p>
          </div>
          <div class="ASIC t_dBox">
            <!-- <p>上行信道数量：{{model.useDfTotal}}</p> -->
            <a-descriptions title :column="1" class="color-des">
              <a-descriptions-item label="上行信道数量">{{model.useDfTotal?parseInt(model.useDfTotal, 16):"*"}}</a-descriptions-item>
            </a-descriptions>
            <template class="t_dBox">
              <div class="pBox">
                <div>上行信道号</div>
                <div
                  style="width:100%;word-wrap: break-word;word-break: break-all;"
                >{{model.useDfInfo?formatterUseDfInfo(model.useDfInfo):"*" }}</div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- <a-table :columns="columns1" :data-source="data1" bordered>
      <span slot="action" slot-scope="text, record">
        <a-button @click="handleInfo(record,1)" type="primary" style="marginRight:15px">查看导弹状态</a-button>
        <a-button @click="handleInfo(record,0)" type="primary">信噪比折线图</a-button>
      </span>
    </a-table>-->
    <a-modal
      title="导弹状态列表"
      :confirm-loading="confirmLoading"
      :visible="visible"
      @ok="handleOk"
      width="75%"
      @cancel="handleCancel"
    >
      <div class="chartBox" v-if="type==0">
        <p class="queryData">
          <span :style="{ color: '#fff' }">星弹下行链路信噪比</span>
          <!-- <a-button type="primary">本周</a-button>
          <a-button type>当天</a-button>
          <a-button type>近一小时</a-button>-->
          <a-range-picker @change="onChange" />
        </p>
        <!-- <div id="main"></div> -->
      </div>
      <a-table v-if="type==1" :columns="missileColumns" :data-source="missileData" bordered></a-table>
    </a-modal>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { processDefineKey } from '@/api/processDefineKey'
import { getAction, httpAction } from '@/api/manage.js'
import { Turns } from '@/utils/util'
import { mapGetters } from 'vuex'
export default {
  props: ['froms'],
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },
  watch: {
    activeBall(a,b){
      console.log(a,b,'=========选中蛋===');
    },
    websocketMsg: {
      handler(val) {
        // 需要进行的操作
        if(val){
          let msg = JSON.parse(val)
          if (msg.cmd == 'MISSILE_NETWORK_QUERY_RESPONSE') {
            if(!this.selectIndex)return
            this.toggleClass(this.selectIndex,this.selectItem)
            //this.getInfoList()
            this.getByFightDemandIdAndNcvIdentificationCodeAndIdentificationCodeLatestValue()
          }
        }
        console.log(val, '导弹网络状态页面----websocket推送的全局数据')

      },
    },
  },
  data() {

    const missileColumns = [
      {
        title: '指挥车名称',
        dataIndex: 'carname',
        key: 'carname',
        customRender: (value, row, index) => {
          const obj = {
            children: value,
            attrs: {},
          }
          obj.attrs.rowSpan = row.carnamerowSpan
          return obj
        },
      },
      {
        title: '导弹名称',
        dataIndex: 'ballName',
        key: 'ballName',
      },
      {
        title: '导弹在网状态',
        dataIndex: 'status',
        key: 'status',
        width: 140,
      },
      {
        title: '导弹设备状态',
        dataIndex: 'eqStatus',
        key: 'eqStatus',
        width: 140,
      },

      {
        title: '信道个数',
        dataIndex: 'timeNo',
        key: 'timeNo',
        width: 100,
      },
      {
        title: '信道号',
        dataIndex: 'timeSlot',
        key: 'timeSlot',
        // scopedSlots: { customRender: 'timeSlot' },
      },
      {
        title: '星弹下行链路信噪比',
        dataIndex: 'dB',
        key: 'dB',
        ellipsis: true,
        customRender: function (t, r, index) {
          return t + 'dB'
        },
      },
      {
        title: '星弹下行链路速率挡',
        dataIndex: 'kbps',
        key: 'kbps',
        ellipsis: true,
        customRender: function (t, r, index) {
          return t + 'kbps'
        },
      },

    ]

    const missileData = [
      {
        carname: '指控车1',
        key: '1-1',
        ballName: '导弹1',
        timeSlot: '1920',
        time: '2022/12/15 12:35:15',
        timeNo: '1',
        status: '在网',
        eqStatus: '正常',
        upNo: 'F1',
        dB: '8',
        kbps: '96',
      },
      {
        carname: '指控车1',
        key: '1-2',
        ballName: '导弹2',
        timeSlot: '7',
        time: '2022/12/15 12:35:15',
        timeNo: '1',
        status: '在网',
        eqStatus: '正常',
        upNo: 'F1',
        dB: '10',
        kbps: '64',
      },

      {
        carname: '指控车2',
        key: '2-1',
        ballName: '导弹1',
        timeSlot: '12',
        time: '2022/12/15 12:35:15',
        timeNo: '1',
        status: '在网',
        eqStatus: '异常',
        upNo: 'F1',
        dB: '10',
        kbps: '64',
      },
    ]
    const columns = [
      // {
      //   title: '',
      //   dataIndex: 'name',
      //   key: 'name',
      // },
      {
        title: '频率资源使用状态',
        children: [
          {
            title: '信道个数',
            dataIndex: 'frequencyNum',
            key: 'frequencyNum',
            // width: 200,
            // sorter: (a, b) => a.age - b.age,
          },
          {
            title: '上行信道号',
            dataIndex: 'frequency',
            key: 'frequency',
            // width: 200,
            // sorter: (a, b) => a.age - b.age,
          },
        ],
        // dataIndex: 'frequency',
        // key: 'frequency',
        // customRender: function (text) {
        //   return +text
        // },
      },
      // {
      //   title: '时隙资源使用状态',
      //   children: [
      //     {
      //       title: '时隙个数',
      //       dataIndex: 'timeuseDfTotal',
      //       key: 'timeuseDfTotal',
      //       // width: 200,
      //       // sorter: (a, b) => a.age - b.age,
      //     },
      //     {
      //       title: '时隙号',
      //       dataIndex: 'timeSlot',
      //       key: 'timeSlot',
      //       // width: 200,
      //       // sorter: (a, b) => a.age - b.age,
      //     },
      //   ],
      //   // key: 'timeSlot',
      //   // dataIndex: 'timeSlot',
      //   // customRender: function (text) {
      //   //   return '时隙号：' + text
      //   // },
      //   // scopedSlots: { customRender: 'tags' },
      // },
      // {
      //   title: 'Action',
      //   key: 'action',
      //   scopedSlots: { customRender: 'action' },
      // },
    ]

    const data = [
      {
        key: '1',
        timeSlot: '1，2，3，4，5，6',
        timeuseDfTotal: '6',
        name: '上行',
        frequency: '1920',
        frequencyNum: '1',
        tags: ['nice', 'developer'],
      },

      // {
      //   key: '4',
      //   timeSlot: '1，2，3，4，6',
      //   name: '下行',
      //   frequency: '1020',
      //   frequencyNum: '1',
      // },
    ]
    const columns1 = [
      {
        title: '序号',
        dataIndex: '',
        key: 'rowIndex',
        width: 80,
        align: 'center',
        customRender: function (t, r, index) {
          return parseInt(index) + 1
        },
      },
      {
        title: '时间',
        dataIndex: 'time',
        key: 'time',
        // scopedSlots: { customRender: 'time' },
      },
      {
        title: '指控车',
        dataIndex: 'carName',
        key: 'carName',
      },

      {
        title: '导弹总数',
        dataIndex: 'ballTotal',
        key: 'ballTotal',
      },

      {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
      },
    ]

    const data1 = [
      {
        key: '1',
        carName: '指控车1',
        ballTotal: 2,
        time: '2022/12/15 12:35:15',

      },
      {
        key: '2',
        carName: '指控车2',
        ballTotal: 1,
        time: '2022/12/15 12:35:15',
      },
      // {
      //   key: '3',
      //   timeSlot: '12',
      //   time: '2022/12/15 12:35:15',
      //   timeNo: '1',
      //   status: '在网',
      //   eqStatus: '异常',
      //   upNo: 'F1',
      //   dB: '10',
      //   kbps: '64',
      // },
    ]
    return {
      chartOptions: {},
      options: [],
      model: {
        networkState: '*',
        deviceState: "*",
        identificationCode: '*',
        noiseRatio: '',
        useDfTotal: '',
        useDfInfo: '',
        carrier: "*",
        position: "*",
        frame: "*",
      },
      activeKey: -1,
      activeBall: "",
      ballList: [
        // {
        //   ballName: '导弹',
        //   status: '*',
        //   id: 1,
        //   eqStatus: "*",
        //   Identification: '1',
        //   carrier: "*",
        //   position: "*",
        //   frame: "*",
        // },
        //  {
        //   ballName: '导弹3',
        //   status: '在网',
        //   id: 2,
        //   eqStatus: "正常",
        //   Identification: '0023',
        // }, {

        //   id: 3,
        //   ballName: '导弹4',
        //   status: '在网',
        //   eqStatus: "正常",
        //   Identification: '0024',
        // }
      ],
      visible: false,
      confirmLoading: false,
      status: '在网',
      data,
      carInfo: undefined,
      columns,
      missileColumns,
      chartValue: -1,
      missileData,
      data1,
      columns1,
      networkState: '',
      type: undefined,
      resultList: [],
      selectIndex:0,
      selectItem:{},
      selectCar:{},
      form: { downRate: '96kbps', noise: '15dB' },
      url: {
        getLatestPackageGridValues: '/grid/nmcPackageGridValue/getLatestPackageGridValues',
        getCommandVehicleMissileNetworkQueryResponse: "/missileNetworkQuery/nmcMissileNetworkQuery/getCommandVehicleMissileNetworkQueryResponse",
        sendPackage: '/channel/nmcChannelInfo/sendPackage',
        getNmcPackageGridValueByCode: '/grid/nmcPackageGridValue/code',
        carlist: '/commandVehicle/nmcCommandVehicle/queryRunningFightDemandOfCommandVehicle',
        getMissile: '/missile/nmcMissileInfo/getByNcvIdentificationCode',
        getByFightDemandIdAndNcvIdentificationCodeAndIdentificationCodeLatestValue:'/missileNetworkQuery/nmcMissileNetworkQuery/getByFightDemandIdAndNcvIdentificationCodeAndIdentificationCodeLatestValue'
      },
    }
  },
  activated() {
  },
  mounted() {
    console.log(this.activeKey);
    this.$nextTick(() => {
      this.getCarList()
      this.initChart()
      // this.toggleClass(0)
    })

    let propsList = ['carname']
    propsList.map((item) => {
      this.missileData = [...this.changeData(this.missileData, item)]
    })
  },
  methods: {
    formatterUseDfInfo(val) {
      if (!val) {
        return '*';
      }
      // let data = JSON.parse(val)
      console.log(val,'上行')
      let arr = val.split(',')
      arr = arr.map(i => {
        return parseInt(i, 16)
      })
      // console.log(parseInt('0058', 16), 'data', arr)
      return arr.join()
    },
    changeCar(val) {
      // this.ballList = this.options.find(i => i.identificationCode == val).nmcMissileInfos
      this.selectCar=this.options.find(i => i.identificationCode == val)
      getAction(this.url.getMissile, { ncvIdentificationCode: val }).then(res => {
        if (!res.result.length) {
          this.$message.error('该指控车没有配置导弹！！！')
        } else {
          this.ballList = res.result
          this.toggleClass(1, this.ballList[0])
        }
      })
    },
    onChangeCar(value) {
      let params1 = {
        nmcPackageGridValues: [
          {
            gridCode: '19-接收端识别码',
            packageGridValue: this.carInfo,
          },
        ],
        packageCode: '19弹载终端网络状态查询指令',
      }
      httpAction(this.url.sendPackage, params1, 'post').then((res) => {
        if (res.code == 200) {
          this.$message.success('发包成功！')

        } else {
          this.$message.error(res.message)
        }
      })



      let params =
      {
        ncvIdentificationCode: this.carInfo,
      }
      getAction(this.url.getCommandVehicleMissileNetworkQueryResponse, params).then((res) => {
        if (res.code == 200) {
          console.log(res, '查询正在运行的作战需求的指挥车的导弹信息')
          res.result = []
          let result = res.result
          this.resultList = [...res.result]
          // this.model = result.find(i => i.identificationCode == this.activeBall)
          //下行速率党
          let svd = '0001'
          this.chartValue = (svd.indexOf('1') + 1) * 2
          this.initChart()

          // this.chartOptions.series[0].data[0].value = this.advanceData
          return
          // this.getValueByCode()
          setTimeout(() => {
            let data = {
              packageCode: "18指挥车网络状态回复",
              businessId: this.carInfo
            }
            getAction(this.url.getLatestPackageGridValues, data).then(res => {
              console.log(res, '18指挥车网络状态回复')
            })
          }, 500)
        } else {
          this.$message.error(res.message)
        }
      })


    },
    getCarList() {
      getAction(this.url.carlist, { pageSize: -1 }).then((res) => {
        console.log(res.result, 'res.result')
        this.options = res.result
      })
    },
    getInfoList(){
      let data = {
        packageCode: "20弹载终端网络状态应答",
        businessId: this.carInfo,
        processDefineKey: processDefineKey.MissileNetworkQueryResponseHandleImplKey
      }
      getAction(this.url.getLatestPackageGridValues, data).then(res => {
        let result = res.result
        let data = JSON.parse(result.find(i => i.gridCode == "20-导弹信息组").parseJsonString)
        let temp = data.find(i => i[0] == this.activeBall)
        this.model.identificationCode = temp[0] //识别码
        this.model.networkState = temp[1] //在网状态
        this.model.deviceState = temp[2] //设备状态
        console.log(temp[2] ,'====temp[2] ');
        this.model.useDfTotal = temp[3] //信道数
        this.model.useDfInfo = temp[4]  //信道号
        // this.chartValue = temp[5] //速率档
        let tempData = Turns(temp[5], 2) //转2进制数解析信噪比，同步信息，速率档位信息
        let arr = tempData.split(/(?=(?:........)*$)/) //8位一截
        let chartDataArr = arr[0].split('').reverse()
        chartDataArr.forEach((i, index) => {
          if (i == 1) {
            this.chartValue = (index + 1) * 2
            this.initChart()
          }
        })
        this.model.frame = arr[1][7] //帧同步
        this.model.position = arr[1][6] //位同步
        this.model.carrier = arr[1][5] //载波同步
        this.model.noiseRatio = arr[1].slice(0, 5)//信噪比
      })

    },
    toggleClass(index, item) {
      this.selectIndex=index
      this.selectItem=item
      console.log(index, item,'----');
      //点击哪个，哪个亮。请求该导弹的数据 并且更新界面
      let nodelist = document.getElementsByClassName('ballBox')
      // console.log(nodelist, '节点.classList.remove("类名")')
      let arr = [...nodelist];
      arr.forEach(element => {
        if (element.classList.contains('blueBox1')) {
          // console.log('包含 test 这个class');
          element.classList.remove("blueBox1")
        }
      });
      if (item) {
        this.activeBall = item.identificationCode
      }
      if (index) {
        arr[index - 1].classList.add("blueBox1")
      }
      this.activeKey = index
      //this.getInfoList()
      this.getByFightDemandIdAndNcvIdentificationCodeAndIdentificationCodeLatestValue()


    },
    getByFightDemandIdAndNcvIdentificationCodeAndIdentificationCodeLatestValue() {
      console.log(this.selectCar, '选中车')
      console.log(this.activeBall, '选中弹')
      let data = {
        fightDemandId: this.selectCar.fightDemandId,
        identificationCode: this.activeBall,
        ncvIdentificationCode: this.selectCar.identificationCode
      }
      getAction(this.url.getByFightDemandIdAndNcvIdentificationCodeAndIdentificationCodeLatestValue, data).then(res => {
        if (res.success) {
          if (res.result) {
            // this.model = res.result
            // 导弹识别码
            this.model.identificationCode = res.result.identificationCode
            // 在网状态
            this.model.networkState = res.result.networkState
            // 设备状态
            this.model.deviceState = res.result.deviceState
            // 信道数
            this.model.useDfTotal = res.result.useDfTotal
            // 信道号
            this.model.useDfInfo = res.result.useDfInfo
            // 转2进制数解析信噪比，同步信息，速率档位信息
            let tempData = Turns(res.result.speedRange, 2)
            let arr = tempData.split(/(?=(?:........)*$)/) //8位一截
            let chartDataArr = arr[0].split('').reverse()
            chartDataArr.forEach((i, index) => {
              if (i == 1) {
                this.chartValue = (index + 1) * 2
                this.initChart()
              }
            })
            this.model.frame = arr[1][7] //帧同步
            this.model.position = arr[1][6] //位同步
            this.model.carrier = arr[1][5] //载波同步
            this.model.noiseRatio = arr[1].slice(0, 5)//信噪比
          } else {
            this.$message.error('暂时没有回复')
          }
        }
      })
    },
    handleExpand(expanded, record) {
      console.log(expanded, record)
      if (expanded) this.innerData = [...JSON.parse(JSON.stringify(record.childrenBall))]
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
    handleInfo(record, type) {
      this.visible = true;
      this.type = type

      // if (type == 0) {

      //   this.$nextTick(() => {
      //     //  执行echarts方法
      //     this.initChart()
      //   })
      // }

    },
    changeData(data, field) {
      console.log(field, 'field')
      console.log(data, 'data')
      let count = 0 //重复项的第一项
      let indexCount = 1 //下一项
      while (indexCount < data.length) {
        var item = data.slice(count, count + 1)[0] //获取没有比较的第一个对象
        if (!item[`${field}rowSpan`]) {
          item[`${field}rowSpan`] = 1 //初始化为1
        }
        if (item[field] === data[indexCount][field]) {
          //第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
          item[`${field}rowSpan`]++
          data[indexCount][`${field}rowSpan`] = 0
        } else {
          count = indexCount
        }
        indexCount++
      }
      return data
    },
    statusQuery() {
      // this.getValueByCode()
    },
    getValueByCode() {
      getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('20-DD1设备状态')}`).then((res) => {
        let temp = res.result
        this.networkState = temp.packageGridValue
        console.log(temp, 'temp')
      })
      getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('20-DD1使用下行速率档')}`).then((res) => {
        let temp = res.result
        this.form.downRate = temp.packageGridValue
        console.log(this.form, '18-星指下行链路使用速率档位')
      })
      getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('20-DD1下行链路信噪比与同步状态标识')}`).then(
        (res) => {
          let temp = res.result
          this.form.noise = temp.packageGridValue
          console.log(this.form, '18-星指下行链路信噪比')
        }
      )
      getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('20-DD1使用上行信道1')}`).then((res) => {
        let temp = res.result
        // this.form.upFrequencyPointNo = temp.packageGridValue
        this.data[0].frequency = temp.packageGridValue
        console.log(this.data[0].frequency, '18-星指上行链路频点号')
      })
    },
    onChange(val) {
      console.log(val, '开始时间结束时间，根据这个查询数据，绘制曲线图')
    },
    initChart() {

      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        series: [
          {
            type: 'gauge',
            startAngle: 230,
            endAngle: -50,
            center: ['50%', '45%'],
            radius: '90%',
            min: 1,
            max: 11,
            splitNumber: 10,
            legendHoverLink: true,
            emphasis: {
              disabled: false,
              itemStyle: {
                borderColor: '#e3e3e'
              }
            },
            axisLine: {
              shadowColor: 'rgba(44,71,199, 0.7)',
              shadowBlur: 10,
              lineStyle: {
                width: 50,
                // background
                color: [
                  [0.25, 'rgba(44,71,199,0.2)'],
                  [0.5, 'rgba(44,71,199,0.2)'],
                  [0.75, 'rgba(44,71,199,0.2)'],
                  [1, 'rgba(44,71,199,0.2)']
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '55%',
              width: 10,
              offsetCenter: [0, 0],
              itemStyle: {
                color: '#26fbf3'
              }
            },
            axisTick: {
              length: 0,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: {
              length: 0,
              lineStyle: {
                color: 'auto',
                width: 5
              }
            },
            axisLabel: {
              color: '#26fbf3',
              fontSize: 16,
              distance: 19,
              rotate: 'tangential',
              formatter: function (value) {
                if (value === 10) {
                  return '96kbps';
                }
                else if (value === 8) {
                  return '48kbps';
                } else if (value === 6) {
                  return '24kbps';
                } else if (value === 4) {
                  return '12kbps';
                } else if (value === 2) {
                  return '3kbps';
                }
                return '';
              },
              textStyle: {
                position: 'inside'  // 刻度文字在刻度线外部显示
              }
            },
            title: {
              offsetCenter: [0, '80%'],
              fontSize: 16,
              color: '#26fbf3'
            },
            detail: {
              fontSize: 22,
              offsetCenter: [0, '100%'],
              valueAnimation: true,
              formatter: function (value) {
                // return Math.round(value) + '';
                if (value === 10) {
                  return '96kbps';
                }
                else if (value === 8) {
                  return '48kbps';
                } else if (value === 6) {
                  return '24kbps';
                } else if (value === 4) {
                  return '12kbps';
                } else if (value === 2) {
                  return '3kbps';
                }
                return '';
              },
              color: '#26fbf3'
            },
            // data: this.chartValue
            data: [
              {
                // value: 8,
                value: this.chartValue,
                name: '下行速率'
              }
            ]
          }
        ]
      };
      // this.chartOptions = option
      option && myChart.setOption(option, true);
    },
  },
}
</script>

<style lang="less" scoped>
.interStatus {
  display: flex;
  margin-top: 15px;
  justify-content: start;
  h2 {
    color: #fff;
    margin-right: 20px;
  }
}
#main {
  width: 450px;
  height: 300px;
}
.chartBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .queryData {
    // margin-top: 10px;
    span {
      margin-right: 35px;
    }
    .ant-btn {
      margin: 8px;
    }
  }
  // .chartsDiv {
  //   width: 50%;
  //   margin: auto;
  #main {
    width: 460px;
    height: 300px;
  }
  // }
}
.pBox {
  width: 100%;
  // line-height: 3em;
  height: 100%;
  background: rgba(10, 44, 81, 0.3);
  font-size: 20px;
  line-height: 50px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.infoBox {
  display: flex;
  // flex-direction: column;
  justify-content: space-between;
  .leftInfo {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .ant-descriptions {
      // width: 400px;
      text-align: center;
      padding: 15px;
      border: 1px solid #3a8ee6;
    }
  }
}
.statusBox {
  padding: 0 20px 0;
}
.resultBox {
  display: flex;
  padding: 15px auto;
  .ballBox {
    margin: 15px;
    padding: 16px;
    cursor: pointer;
  }
  .blueBox1 {
    // background: rgba(38, 251, 243, 0.6);
    color: rgb(76, 228, 248);
    border: 1px solid #26fbf3;
  }
}
.ASIC {
  background: url('~@/assets/img/C/ASIC带点背景.png') no-repeat;
  background-size: 100% 100%;
}

.ballInfo {
  width: 100%;
  // min-height: 800px;

  color: #b3f5ff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
  padding: 25px;
  background: url('~@/assets/img/C/homePageChartEmergency.png') no-repeat;
  background-size: 100% 100%;
  .ASIC {
    min-width: 360px;
  }
  .t_dBox {
    // padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-around !important;
    align-items: center !important;

    span {
      display: block;
      width: 100%;
      line-height: 50px;
      font-size: 24px;
      background: rgba(10, 44, 81, 0.6);
      // border: 1px solid;

      // margin-bottom: 50px;
      // margin-top: 30px;
      // padding-left: 20px;
      text-align: center;
    }
    p {
      width: 100%;
      line-height: 150px;
      font-size: 70px;
      text-align: center;
      // border: 1px solid;

      color: #26fbf3;
      background: rgba(10, 44, 81, 0.3);
      margin: 0;
    }
  }
  .ASIC {
    // min-width: 370px;
    width: 28%;
    min-height: 300px;
    padding: 15px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: space-around;
    .box_signal_level_box {
      background: url('~@/assets/img/C/box_signal_level_box.png') no-repeat;
      background-size: 100% 100%;
      color: #b3f5ff;
      font-size: 28px;
      line-height: 100px;
      text-align: center;
    }
  }
  .topDiv,
  .bottomDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;
  }
}
</style>
<style lang="less">
.statusBox .color-des {
  width: 95%;
}
.statusBox .color-des .ant-descriptions-item {
  height: 50px !important;
  line-height: 50px !important;
}
.statusBox .color-des .ant-descriptions-title {
  background: rgba(10, 44, 81, 0.6);
  height: 50px !important;
  padding-left: 20px;
  line-height: 50px !important;
  color: #b3f5ff;
}
.statusBox .color-des .ant-descriptions-item-label {
  background: rgba(10, 44, 81, 0.6);
  width: 58%;
  height: 50px !important;
  line-height: 50px !important;
  text-align: center;
  color: #b3f5ff;
}
.statusBox .color-des .ant-descriptions-item-content {
  height: 50px !important;
  line-height: 50px !important;
  background: linear-gradient(to right, rgba(11, 50, 85, 0.8), rgba(141, 136, 136, 0.01));
  width: 42%;
  padding: 0px 20px;
  color: #26fbf3;
}
</style>

